<template>
<div class="backpic">
    <div class="container">
      <div class="row row-centered">
          <div class="well col-md-6 col-centered" id="login">
              <div class="form-group">
                      <label class="form-control text-center">欢迎登陆玖兰装饰</label>
                  </div>
                  <div class="form-group">
                      <input type="text" class="form-control text-danger active" id="username" v-model="username" placeholder="请输入用户名"/>
                  </div>
                  <div class="form-group">
                      <input type="password" class="form-control" id="password" v-model="password" placeholder="请输入密码"/>
                  </div>
                  <button class="btn btn-success btn-block" @click="dologin">登录</button>
          </div>
      </div>
    </div>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
</div>
</template>

<script>
/* eslint-disable */

export default {
  name: 'Login',
  data() {
    return {
  	username: '',
	  password: ''
  	}
  },
  methods: {
  	dologin() {
      console.log(process.env.VUE_APP_BASE_API)
      this.$store.dispatch('LoginByUsername', this.$data).then(() => {
        this.$router.push('/home')
      }).catch(() => {
        
      })
  	}
  }
}
</script>

<style scoped>
    /*web background*/
    .backpic{
    	background-image: url(http://fs.ufwl.net/group1/M00/0E/7A/CgIBXF0N87qAFZOVAAABzWBxi5s411.png);
        background-size: 100% 100%;
        height: 120%;
      	position: fixed;
      	width: 100%
    }
    .container{
        display:table;
        height:80%;
    }

    .row{
        display: table-cell;
        vertical-align: middle;
    }
    /* centered columns styles */
    .row-centered {
        text-align:center;
    }
    .col-centered {
        display:inline-block;
        float:none;
        text-align:left;
        margin-right:-4px;
    }
    h3 {
	  margin: 40px 0 0;
  	}
  	ul {
  	  list-style-type: none;
  	  padding: 0;
  	}
  	li {
  	  display: inline-block;
  	  margin: 0 10px;
  	}
  	a {
  	  color: #42b983;
  	}
</style>